<template>
	<!-- 点菜评价商家详情界面 -->
	<view id="store">
		<!-- 头 -->
		<view class="store_header">
			<!-- 顶部 -->
			<view class="header">
				<view class="header_box">
					<!-- 头像 -->
					<view class="header_box_headerImg">
						<image src="../../static/images/store_image@2x.png" />
					</view>
					<!-- 内容 -->
					<view class="header_box_main">
						<view class="header_box_main_name">李大爷蔬菜摊（花样菜场店）</view>
						<view class="header_box_main_main">
							<view>
								<image src="../../static/images/star-halfselected@2x.png" />
								<image src="../../static/images/star-halfselected@2x.png" />
								<image src="../../static/images/star-halfselected@2x.png" />
								<image src="../../static/images/star-halfselected@2x.png" />
								<image src="../../static/images/star-halfselected@2x.png" />
							</view>
							<view>约30分钟</view>
							<view>月售1000</view>
						</view>
					</view>
					<!-- 收藏 -->
					<view class="header_box_collect">
						<image :style="{ display: collectActive == true ? 'block' : 'none' }" src="../../static/images/collect(1)@2x.png" @click="clickCollect" />
						<image :style="{ display: collectActive === true ? 'none' : 'block' }" src="../../static/images/collect(2)@2x.png" @click="clickCollect" />
					</view>
				</view>
			</view>
			<!-- 点菜，评价，商家 -->
			<view class="store_header_header">
				<view :class="{ active: activeBg === 0 }" @click="orderDishes">
					点菜
				</view>
				<view :class="{ active: activeBg === 1 }" @click="evaluate">评价</view>
				<view :class="{ active: activeBg === 2 }" @click="merchant">商家</view>
			</view>
		</view>
		<!-- 身体 -->
		<view class="store_main">
			<scroll-view scroll-y="true" style="height: 100%;">
				<!-- 主体点菜 -->
				<view class="main main_orderDishes" :class="{ displayBlock: displayBlock === 0 }">
					<!-- 循环的一个框 -->
					<view class="main_box" v-for="(item,id) in mainlist" :key="id" @click="vegrtablesDetails">
						<!-- 头像 -->
						<view class="main_box_headPortrait">
							<image :src="item.headPortrait" />
						</view>
						<!-- 循环主体 -->
						<view class="main_box_main">
							<!-- 名字 -->
							<view class="main_box_main_name">{{ item.name }}</view>
							<!-- 月售以及评论 -->
							<view class="main_box_main_grade">
								<!-- 评星 -->
								<view class="main_box_main_grade_sale">月售{{ item.sale }}</view>
								<!-- 评论 -->
								<view class="main_box_main_grade_comment">好评率{{ item.comment }}%</view>
							</view>
							<!-- 标签 -->
							<view class="main_box_main_label">
								<view v-for="(item,index) in item.label" :key="index">{{ item.label }}</view>
							</view>
							<!-- 价格 -->
							<view class="commodity_main_particulars_price">
								<text>￥</text>
								<text class="price">29.90</text>
								<text class="del">￥49.00</text>
								<view class="commodity_main_particulars_addsub">
									<image src="../../static/images/-@2x.png" />
									<text class="number">1</text>
									<image src="../../static/images/+@2x.png" />
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 主体评价 -->
				<view class="main main_evaluate" :class="{ displayBlock: displayBlock === 1 }">
					<!-- 评价循环的框 -->
					<view class="main_evaluate_box">
						<!-- 头像用户名评星时间 -->
						<view class="main_evaluate_box_header">
							<!-- 头像 -->
							<view class="main_evaluate_box_header_img">
								<image src="../../static/images/NoPath@2x.png" />
							</view>
							<!-- 用户名和时间评星 -->
							<view class="main_evaluate_box_header_main">
								<!-- 用户名和时间 -->
								<view class="main_evaluate_box_header_main_nameTime">
									<view>用户名</view>
									<view>2020-06-19</view>
								</view>
								<!-- 评星 -->
								<view class="main_evaluate_box_header_main_star">
									<image src="../../static/images/star-halfselected@2x.png" />
									<image src="../../static/images/star-halfselected@2x.png" />
									<image src="../../static/images/star-halfselected@2x.png" />
									<image src="../../static/images/star-halfselected@2x.png" />
									<image src="../../static/images/star-halfselected@2x.png" />
								</view>
							</view>
						</view>
						<!-- 评价内容 -->
						<view class="main_evaluate_box_main">评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容</view>
						<!-- 点菜标签 -->
						<view class="main_evaluate_box_label">
							<view>地瓜约250g</view>
						</view>
					</view>
					<!-- 评价循环的框 -->
					<view class="main_evaluate_box">
						<!-- 头像用户名评星时间 -->
						<view class="main_evaluate_box_header">
							<!-- 头像 -->
							<view class="main_evaluate_box_header_img">
								<image src="../../static/images/NoPath@2x.png" />
							</view>
							<!-- 用户名和时间评星 -->
							<view class="main_evaluate_box_header_main">
								<!-- 用户名和时间 -->
								<view class="main_evaluate_box_header_main_nameTime">
									<view>用户名</view>
									<view>2020-06-19</view>
								</view>
								<!-- 评星 -->
								<view class="main_evaluate_box_header_main_star">
									<image src="../../static/images/star-halfselected@2x.png" />
									<image src="../../static/images/star-halfselected@2x.png" />
									<image src="../../static/images/star-halfselected@2x.png" />
									<image src="../../static/images/star-halfselected@2x.png" />
									<image src="../../static/images/star-halfselected@2x.png" />
								</view>
							</view>
						</view>
						<!-- 评价内容 -->
						<view class="main_evaluate_box_main">评价内容</view>
						<!-- 点菜标签 -->
						<view class="main_evaluate_box_label">
							<view>地瓜约250g</view>
						</view>
					</view>
				</view>

				<!-- 主体商家 -->
				<view class="main main_merchant" :class="{ displayBlock: displayBlock === 2 }">
					<!-- 地址 -->
					<view class="main_merchant_site">
						<image src="../../static/images/site@2x.png" />
						<view>四川省成都市</view>
					</view>
					<!-- 图片 -->
					<view class="main_merchant_img">
						<scroll-view scroll-x>
							<image src="../../static/images/Business_image@2x.png" />
							<image src="../../static/images/Business_image@2x.png" />
							<image src="../../static/images/Business_image@2x.png" />
							<image src="../../static/images/Business_image@2x.png" />
						</scroll-view>
					</view>
					<!-- 循环的设置 -->
					<view class="main_merchant_set">
						<view>查看相关资质</view>
						<view>配送服务：商家自送</view>
						<view>配送时间：7：00~23：00</view>
						<view>
							<text>参加店铺分销</text>
							<text>一键分享</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				    mainlist: [
				      {
				        id: 0,
				        headPortrait: '../../static/images/market_heade_img@2x.png',
				        name: '李大爷菜摊',
				        sale: 12,
				        label: ['种类多', '干净'],
				        comment: 170,
				      },
				      {
				        id: 1,
				        headPortrait: '../../static/images/market_heade_img@2x.png',
				        name: '李大爷菜摊',
				        sale: 12,
				        label: ['种类多', '干净'],
				        comment: 170,
				      },
				    ],
				    collectActive: true, //收藏
				    activeBg: 0, //点菜评价商家
				    displayBlock: 0, //点菜评价商家的身体
			}
		},
		methods: {
			// 点击收藏显示隐藏
			clickCollect() {
				// 点击判断collectActive是否为true，为true显示，为false隐藏
				if (this.collectActive == true) {
					this.collectActive = false;
				} else {
					this.collectActive = true;
				}
			},
			// 点击点菜头部样式激活，身体显示
			orderDishes() {
				this.activeBg = 0;
				this.displayBlock = 0;
			},
			// 点击评价头部样式激活，身体显示
			evaluate() {
				this.activeBg = 1;
				this.displayBlock = 1;
			},
			// 点击商家头部样式激活，身体显示
			merchant() {
				this.activeBg = 2;
				this.displayBlock = 2;
			},
			// 点击跳转当前菜品详情界面
			vegrtablesDetails() {
				wx.navigateTo({
					url: '../vegrtablesDetails/vegrtablesDetails',
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	#store {
		display: flex;
		flex-direction: column;

		// 头
		.store_header {

			/* 顶部 */
			.header {
				background: linear-gradient(to right bottom, #28c84e, #0fd41d);
				padding: 20rpx;

				.header_box {
					padding: 20rpx;
					background: #fff;
					display: flex;
					justify-content: space-between;
					align-items: center;

					// 头像
					.header_box_headerImg {
						image {
							width: 100rpx;
							height: 100rpx;
						}
					}

					// 内容
					.header_box_main {
						color: #333;
						font-size: 24rpx;
						flex: 1;
						padding: 0 20rpx;

						.header_box_main_name {
							font-size: 34rpx;
							font-weight: bold;
						}

						.header_box_main_main {
							display: flex;

							view {
								padding-right: 20rpx;

								image {
									width: 40rpx;
									height: 40rpx;
								}
							}
						}
					}

					// 收藏
					.header_box_collect {
						image {
							width: 56rpx;
							height: 52rpx;
						}
					}
				}
			}

			// 点菜评价商家
			.store_header_header {
				display: flex;
				font-size: 32rpx;

				view {
					padding: 18rpx 0;
					text-align: center;
					width: 33.33%;
					background: #e5e5e5;
				}

				.active {
					background: #fff;
				}
			}
		}

		// 身体
		.store_main {
			flex: 1;
			overflow-y: scroll;
			background: #fff;

			/* 主体点菜评价商家 */
			.main {
				display: none;

				/* 循环的框 */
				.main_box {
					height: 240rpx;
					display: flex;
					font-size: 24rpx;

					/* 头像 */
					.main_box_headPortrait {
						padding: 20rpx;

						image {
							width: 200rpx;
							height: 200rpx;
						}
					}

					/* 循环主体 */
					.main_box_main {
						flex: 1;
						border-bottom: 2rpx solid #f5f2f5;

						// 名字
						.main_box_main_name {
							font-size: 24rpx;
							font-weight: bold;
							line-height: 44rpx;
							padding-top: 20rpx;
						}

						// 评星以及评论
						.main_box_main_grade {
							display: flex;
							align-items: center;
							font-size: 20rpx;

							view {
								margin-right: 20rpx;
							}
						}

						// 标签
						.main_box_main_label {
							display: flex;

							view {
								display: inline-block;
								font-size: 24rpx;
								color: #ff6633;
								border-radius: 24rpx;
								background: rgba(255, 102, 51, 0.1);
								padding: 0 20rpx;
								margin: 24rpx 12rpx 0 0;
								line-height: 40rpx;
							}
						}

						/* 详细信息价格 */
						.commodity_main_particulars_price {
							position: relative;

							text {
								color: #999;
								font-size: 20rpx;
								font-weight: bold;
							}

							.del {
								text-decoration: line-through;
							}

							.price {
								font-size: 34rpx;
								color: #f63;
								font-weight: bold;
							}

							/* 详细信息价格里的图标 */
							.commodity_main_particulars_addsub {
								position: absolute;
								right: 20rpx;
								top: -4rpx;

								image {
									width: 48rpx;
									height: 48rpx;
									vertical-align: middle;
								}

								.number {
									font-size: 34rpx;
									color: #000;
									font-weight: bold;
									display: inline-block;
									width: 96rpx;
									text-align: center;
									line-height: 48rpx;
									vertical-align: middle;
								}
							}
						}
					}
				}
			}

			// 点菜评价商家的身体显示隐藏
			.displayBlock {
				display: block;
			}

			// 评价
			.main_evaluate {

				// 循环的框
				.main_evaluate_box {
					background: #fff;
					margin: 0 20rpx;
					padding-bottom: 8rpx;
					border-bottom: 2rpx solid #f4f1f4;

					// 头像用户名等
					.main_evaluate_box_header {
						padding-top: 20rpx;
						display: flex;

						// 头像
						.main_evaluate_box_header_img {
							image {
								width: 100rpx;
								height: 100rpx;
							}
						}

						// 用户名时间评星
						.main_evaluate_box_header_main {
							flex: 1;
							padding-left: 20rpx;

							// 用户名时间
							.main_evaluate_box_header_main_nameTime {
								display: flex;
								justify-content: space-between;
								align-items: center;

								view:first-child {
									font-size: 34rpx;
									font-weight: bold;
								}

								view:last-child {
									font-size: 20rpx;
								}
							}

							// 评星
							.main_evaluate_box_header_main_star {
								image {
									width: 40rpx;
									height: 40rpx;
								}
							}
						}
					}

					// 评价内容
					.main_evaluate_box_main {
						font-size: 28rpx;
						margin-bottom: 20rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}

					// 点菜标签
					.main_evaluate_box_label {
						display: flex;

						view {
							border-radius: 10px;
							margin-right: 20rpx;
							background: rgba(0, 191, 127, 0.1);
							color: #00bf7f;
							font-size: 20rpx;
							padding: 6rpx 10rpx;
						}
					}
				}
			}

			// 商家
			.main_merchant {

				// 地址
				.main_merchant_site {
					display: flex;
					align-items: center;
					font-size: 32rpx;

					image {
						width: 39rpx;
						height: 48rpx;
						margin: 0 20rpx;
					}
				}

				// 图片
				.main_merchant_img {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 280rpx;
					padding: 20rpx;
					padding-bottom: 0;

					scroll-view {
						white-space: nowrap;
						width: 100%;

						image {
							width: 240rpx;
							height: 240rpx;
							margin-right: 20rpx;
						}
					}
				}

				// 循环的设置
				.main_merchant_set {
					view {
						height: 80rpx;
						padding: 0 20rpx;
						border-bottom: 2rpx solid rgba(0, 0, 0, 0.2);
						font-size: 32rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						text:last-child {
							display: block;
							width: 160rpx;
							height: 64rpx;
							line-height: 64rpx;
							background: linear-gradient(135deg,
								rgba(40, 200, 78, 1) 0%,
								rgba(15, 212, 29, 1) 100%);
							border-radius: 10rpx;
							text-align: center;
							color: #fff;
							font-size: 32rpx;
						}
					}
				}
			}
		}
	}
</style>
